<template>
  <div id="application-for-public-spaces">
    <div class="main-container container-fluid container-limited page-holder">
      <div class="easy-container-x2 border-bottom"></div>
      <el-menu mode="horizontal" class="deep-color a-link-item" :default-active="activeItem">
        <el-menu-item index="unsolved">
          <router-link :to="`${currentRouter}?state=unsolved`">未处理</router-link>
        </el-menu-item>
        <el-menu-item index="solved">
          <router-link :to="`${currentRouter}?state=solved`">已通过</router-link>
        </el-menu-item>
        <el-menu-item index="closed">
          <router-link :to="`${currentRouter}?state=closed`">已拒绝</router-link>
        </el-menu-item>
      </el-menu>
      <SpacesList :applies="applies" :is-loading="isLoading" v-on:refreshList="loadSpaces"/>
      <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
    </div>
  </div>
</template>

<script>
import SpacesList from './SpacesList';

export default {
  name: 'ApplicationForPublicSpacesIndex', // 申请公开的空间列表
  components: { SpacesList },
  data() {
    return {
      applies: [], // 申请公开的空间列表数据
      isLoading: false,
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  computed: {
    // 当前路由
    currentRouter() { return `/${this.$rp.ADMIN}/${this.$rp.APPLICATION_FOR_PUBLIC_SPACES}`; },
    // 当前加载的列表类型
    activeItem() { return this.$route.query.state || 'unsolved'; },
    // 加载列表所需参数
    initLoadParams() {
      return {
        state: this.initLoadState,
        page: this.$route.query.page || 1,
      };
    },
    // 将加载类型处理为数字
    initLoadState() {
      switch (this.$route.query.state) {
        case 'unsolved': return 0;
        case 'solved': return 1;
        case 'closed': return 2;
        default: return 0;
      }
    },
  },
  methods: {
    // 加载申请公开的空间列表的数据
    loadSpaces() {
      this.isLoading = true;
      this.$api.applyingForPublicSpaces.index(this.initLoadParams)
        .then((res) => {
          this.applies = res.data;
          this.pagination.currentPage = res.kaminari.current_page;
          this.pagination.pageCount = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
  },
  created() { this.loadSpaces(); },
  watch: {
    initLoadParams() { this.loadSpaces(); },
  },
};
</script>

<style></style>
